<script setup name="home">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const { active } = route.query
// 所在tab页面
const tabActive = ref(0)
tabActive.value = Number(active)
const badge = ref(0)

const tabList = ref(['首页', '二级页', '次级页'])
const onChange = (val) => {
  console.log('onChange', val)
  list.value = []
  loading.value = true
  finished.value = false
  onLoad()
}

// 空数据是否展示
const empty = ref(false)
// list列表 + refresh刷新
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    if (refreshing.value) {
      list.value = []
      refreshing.value = false
    }
    // 请求体
    for (let i = 0; i < 15; i++) {
      list.value.push(list.value.length + 1)
    }

    // 加载状态结束
    loading.value = false
    // 数据全部加载完成
    if (list.value.length >= 60) {
      finished.value = true
    } else if (list.value.length === 0) {
      finished.value = true
      empty.value = true
    }
  }, 2000)
}
// refresh下拉刷新
const onRefresh = () => {
  // 清空列表数据
  finished.value = false
  // 重新加载数据 将 loading 设置为 true，表示处于加载状态
  loading.value = true
  onLoad()
}
</script>
<template>
  <van-tabs
    v-model:active="tabActive"
    animated
    swipeable
    sticky
    @change="onChange"
  >
    <van-tab
      v-for="tab in tabList"
      :title="tab"
      :badge="badge"
      :show-zero-badge="false"
      :key="tab"
    >
      <!--  <van-notice-bar
          left-icon="volume-o"
          text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
        /> -->

      <van-empty v-show="empty" />
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell v-for="item in list" :key="item" :title="item" />
        </van-list>
      </van-pull-refresh>
    </van-tab>
  </van-tabs>
</template>

<style lang="scss" scoped></style>
